

var students = [
    { stuname: 'aa', stuage: 18, stusex: '男', stutel: '138' },
    { stuname: 'bb', stuage: 19, stusex: '男', stutel: '138' },
    { stuname: 'cc', stuage: 20, stusex: '女', stutel: '138' },
    { stuname: 'dd', stuage: 18, stusex: '男', stutel: '138' },
    { stuname: 'ee', stuage: 18, stusex: '女', stutel: '138' }
];

function $(id) {
    return document.getElementById(id);
}
var tab = $("tab");
//当前页号
var page =1 ;
//单页显示的长度
var pageLimit = 2;
//最大页数
var sumPage = Math.ceil(students.length/pageLimit) ;
//显示页号最大个数
var pageNoLimit = 10;



/*****************************对数组的操作**********************************************/
var micro = {
    //获取数据
    getDate: function () {
        var data = [];
        data[0] = $("name").value;
        data[1] = $("age").value;
        var sexs = document.getElementsByName("sex");
        for (var i = 0; i < sexs.length; i++) {
            if (sexs[i].checked == true) {
                data[2] = sexs[i].value;
            }
        }
        data[3] = $("tel").value;
        return data;
    },


    //添加json
    add: function (name, age, sex, tel) {
        var stu = {
            stuname: name,
            stuage: age,
            stusex: sex,
            stutel: tel
        }
        students.push(stu);
        console.log(students);
    },

    //删除数组中json
    del: function (index) {
        students.splice(index, 1);
    },

    //修改数组中的数据
    update :function(index,name,age,sex,tel){
        students[index-1].stuname = name ;
        students[index-1].stuage = age;
        students[index-1].stusex = sex;
        students[index-1].stutel = tel;
    }


}

/****************************************对表格的操作**************************************************/
var manage = {
    //添加学生
    addStudent: function () {
      //  alert(1);
        var data = micro.getDate();
        micro.add(data[0], data[1], data[2], data[3]);
        this.delrow();
        this.showTable(page);
        sumPage = Math.ceil(students.length/pageLimit)
        this.createPage();

    },

    //删除学生
    delStudent: function (index) {
        micro.del(index);
        this.delrow();
        this.showTable(page);
    },

    //修改学生
    upStudent: function () {

    },

    //查找学生
    selStudent: function () {

    },

    //展示表格信息
    showTable: function (x) {
        var begin  = (x - 1)*pageLimit ;
        var end = begin + pageLimit;
        if (end > students.length){
            end = students.length;
        }
        for (var i = begin ; i < end ; i++) {
            var tr = tab.insertRow();
            var td = tr.insertCell();
            td.innerText = i + 1;
            var td1 = tr.insertCell();
            td1.innerText = students[i].stuname;
            var td2 = tr.insertCell();
            td2.innerText = students[i].stuage;
            var td3 = tr.insertCell();
            td3.innerText = students[i].stusex;
            var td4 = tr.insertCell();
            td4.innerText = students[i].stutel;
            var td5 = tr.insertCell();
            td5.innerHTML = "<a onclick = 'manage.delStudent(" + i + ")' > 删除 </a>";
        }
    },

    //清空表格
    delrow: function () {
        while (tab.rows.length > 1) {
            tab.deleteRow(1);
        }
    },

    //表格转变为输入框
    cellToText :function(obj){
        var cellValue = obj.innerText; 
        obj.innerText = "";
        var txt = document.createElement("input");
        txt.type = 'text';
        txt.id = "text_0";
        obj.appendChild(txt);
        txt.value = cellValue ;
    },

    //取消输入框
    cancle : function(obj) {
        var txtValue = obj.value;
        obj.parentNode.innerText = txtValue;
    },

    //分页操作
    createPage :function(){
        var pno = "";
        if(sumPage <= pageNoLimit){
            for(var i = 1 ; i <= sumPage ; i++){
                if(i == sumPage ){
                    pno = pno + "<a href = javascript:manage.display("+i+")>"+i+"</a>";
                }
                else {
                    pno = pno + "<a href = javascript:manage.display("+i+")>"+i+"</a>" + " | ";
                }
            }
        }else {
            if(page < 7){
                for(var i = 1 ; i<= pageNoLimit ; i++){
                    if(i == pageNoLimit){
                        pno = pno + "<a href = javascript:manage.display("+i+")>"+i+"</a>";
                    }else {
                        pno = pno + "<a href = javascript:manage.display("+i+")>"+i+"</a>"+ " | ";
                    }
                }
            }else if (page >= 7 && page <= sumPage - 4){
                var begin = page - 5;
                for(var i = begin  ; i <= pageNoLimit+begin ; i++){
                    if(pageNoLimit+begin == i){
                        pno = pno + "<a href = javascript:manage.display("+i+")>"+i+"</a>";
                    }else {
                        pno = pno + "<a href = javascript:manage.display("+i+")>"+i+"</a>" + " | ";
                    }
                }
            }else if (page > sumPage -4){
                var begin = sumPage - pageNoLimit;
                for(var i = begin  ; i <= sumPage ; i++){
                    if(sumPage == i ){
                        pno = pno + "<a href = javascript:manage.display("+i+")>"+i+"</a>";
                    }else {
                        pno = pno + "<a href = javascript:manage.display("+i+")>"+i+"</a>" + " | ";
                    } 
                    
                }
            }
        }
        var pn = $("pageNo");
        pn.innerHTML=pno;
        
    },
    ///分页显示操作
    display : function (index) {
        page = index ;
        this.createPage();
        this.delrow();
        this.showTable(page);
    }

}

//鼠标双击事件
document.ondblclick = function () {
    if(event.srcElement.tagName.toLowerCase() == 'td' && event.srcElement != event.srcElement.parentNode.cells[0]){
        manage.cellToText(event.srcElement);
    }

}

//鼠标恢复事件
document.onmouseup = function() {
    var txt = $("text_0");
    if(event.srcElement.tagName.toLowerCase() != "input" && txt ){
        var a = txt.parentNode.parentNode;
        manage.cancle(txt);
        //调用更新的数据
        micro.update(a.cells[0].innerText,a.cells[1].innerText,a.cells[2].innerText,a.cells[3].innerText,a.cells[4].innerText);
    }
}

//鼠标滑过事件
document.onmousemove = function() {
    if(event.srcElement.tagName.toLowerCase() == "td"){
        event.srcElement.parentNode.bgColor = "red";
    }
}

//鼠标移除事件
document.onmouseout = function() {
    if(event.srcElement.parentNode.bgColor == "red"){
        event.srcElement.parentNode.bgColor = "white";
    }
}

manage.showTable(page);
manage.createPage();